<template>
    <van-nav-bar title="XX商品信息" left-arrow @click-left="onClickLeft" />
    <!-- 商品图片展示-->
    <van-image width="100%" height="100%"
        src="https://m.360buyimg.com/mobilecms/s1265x1265_jfs/t1/282172/17/11037/48973/67e60c74F038154f9/04aca7fd846562c6.jpg"
        @click="showPopup" />
    <!-- 弹框-->
    <van-popup v-model:show="show" :style="{ padding: '0px' }">
        <van-image width="460" height="100%"
            src="https://m.360buyimg.com/mobilecms/s1265x1265_jfs/t1/282172/17/11037/48973/67e60c74F038154f9/04aca7fd846562c6.jpg" />
    </van-popup>
    <!--活动分割线-->
    <van-image width="100%"
        src="https://img10.360buyimg.com/imagetools/jfs/t1/315579/8/12478/12374/685d1aa2F8a30203b/0b2799def99d2ba0.png"
        style="margin-top: -4px;" />
    <!--价格-->
    <div style="color: red; margin-left: 20px; margin-top: 10px;">￥<strong><em
                style="font-size: 28px;">2849</em>.00</strong> </div>
    <div style="font-size: 22px; color: #6b6a69; font-weight: 800; margin-top: 10px;">

        <!--商品名字展示-->
        <van-row>
            <van-col span="2"><van-icon name="new-arrival" color="red" size="30px" /></van-col>
            <van-col span="19">
                <!--文本省略-->
                <van-text-ellipsis :content="text" />
            </van-col>
            <!--下拉按钮-->
            <van-collapse v-model="activeName" accordion>
                <van-collapse-item name="1">
                    {{ text }}<span> 降价400.00元</span>
                </van-collapse-item>
            </van-collapse>
        </van-row>
    </div>
    <!--分享-->
    <van-row style="text-align: center; margin-top: 20px;">
        <van-col span="8">
            <div style="float: right;" @click="showShare = true">分享</div>
            <div style="float: right;"> <img
                    src="https://img11.360buyimg.com/img/jfs/t1/185923/19/38125/325/64fad71dFeef526f9/f11f072077880807.png"
                    alt="" width="20" height="20"></div>

        </van-col>
        <van-col span="8">
            <van-icon name="star" size="20px" /> <span>收藏</span>

        </van-col>
        <van-col span="8">
            <van-icon name="label" /> <span>降价通知</span>
        </van-col>
    </van-row>
    <!--分享弹框-->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
   
    <hr>
    <van-tabs v-model:active="activeNames">
        <van-tab title="商品介绍" name="a">
            <img src="//img20.360buyimg.com/imgzone/jfs/t1/249140/38/14748/249938/6697e32aF1aa2237b/cd7f790d05cb45c1.png.webp"
                style="width:auto;height:auto;max-width:100%;" loaded="3">
            <img src="//img30.360buyimg.com/imgzone/jfs/t1/95861/39/47368/863138/6741a0bfFa89453c5/172a69cb7f99fb53.png.webp"
                style="width: auto; height: auto; max-width: 100%;" loaded="2">
        </van-tab>
        <van-tab title="规格参数" name="b">内容 2</van-tab>
        <van-tab title="售后保障" name="c">
            <img style="width:100%"
                src="//img14.360buyimg.com/paipai/jfs/t1/55158/39/13602/322661/5da5a7a1E88fea3bd/37e6a7d9b1f0f2f0.jpg!q70.dpg.webp">
        </van-tab>
    </van-tabs>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
    </van-action-bar>
</template>

<script setup>

import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { showToast} from 'vant';
const route = useRoute();
const pid=ref()
const activeName = ref(['1']);
const text = ref('索尼（SONY）Xperia 1iii X1 三代 5G全网通拍照手机 新款X1 III代库存手机 纱月灰 12GB+256GB 港版')

const activeNames = ref('a');
const showShare = ref(false);
const options = ref([
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
]);

const onSelect = (option) => {
    showToast(option.name);
    showShare.value = false;
};

onMounted(() => { 
    route.params.pid

})

const show = ref(false);
const showPopup = () => {
    show.value = true;
};


// 返回上一层
const onClickLeft = () => history.back();

const onClickIcon = () => Toast('点击图标');
const onClickButton = () => Toast('点击按钮');
</script>

<style scoped>

</style>